<style scoped>
.base-print-frame {
  position: relative;
  border: 1px solid #333;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bar-code {
  min-width: 150px !important;
  max-width: 190px !important;
}
</style>
<template>
  <div
    v-if="order && order.id"
    :id="'order_'+order.id"
    :style="{position:'relative',width:toPx(order.printTemp.width)+'px',height:toPx(order.printTemp.height)+'px'}"
  >
    <img
      style="position:absolute;width:100%;height:100%;z-index:1;left:0;top:0"
      :src="order.printTemp.backImg"
      alt
    />
    <template v-if="isDrag" v-for="(f,index) in order.printTempFields">
      <drag-it-dude
        :key="index"
        @dropped="handleDropped(f)"
        @dragging="handleDragging(f)"
        :id="f.id"
        v-if="f.type=='text'"
        :style="{
                zIndex:2,
                width:f.width+'px',
                height:f.height+'px',
                position:'absolute',
                fontSize:f.fontSize+'px',
                fontWeight:f.fontWeight,
                top:f.fieldTop+'px',
                left:f.fieldLeft+'px'
              }"
      >{{f.fieldValue}}</drag-it-dude>
      <drag-it-dude
        :key="index"
        :id="f.id"
        @dropped="handleDropped(f)"
        @dragging="handleDragging(f)"
        v-if="f.type=='img'"
        :style="{
                zIndex:2,
                width:f.width+'px',
                height:f.height+'px',
                position:'absolute',
                top:f.fieldTop+'px',
                left:f.fieldLeft+'px',
                background:'url('+f.fieldValue+')',
                backgroundRepeat:'no-repeat',
                backgroundSize:'100% 100%'
              }"
      ></drag-it-dude>
      <drag-it-dude
        :key="index"
        v-if="f.type=='barcode'"
        @dropped="handleDropped(f)"
        @dragging="handleDragging(f)"
        :id="f.id"
        :style="{
                zIndex:2,
                position:'absolute',
                top:f.fieldTop+'px',
                left:f.fieldLeft+'px'
              }"
      >
        <img :id="'barcode_'+f.id" />
      </drag-it-dude>
    </template>
    <template v-if="!isDrag" v-for="(f,index) in order.printTempFields">
      <div
        :key="index"
        :id="f.id"
        v-if="f.type=='text'"
        :style="{
                zIndex:2,
                width:f.width+'px',
                height:f.height+'px',
                position:'absolute',
                fontSize:f.fontSize+'px',
                fontWeight:f.fontWeight,
                top:f.fieldTop+'px',
                left:f.fieldLeft+'px'
              }"
      >{{f.fieldValue}}</div>
      <div
        :key="index"
        :id="f.id"
        v-if="f.type=='img'"
        :style="{
                zIndex:2,
                width:f.width+'px',
                height:f.height+'px',
                position:'absolute',
                top:f.fieldTop+'px',
                left:f.fieldLeft+'px',
                background:'url('+f.fieldValue+')',
                backgroundRepeat:'no-repeat',
                backgroundSize:'100% 100%'
              }"
      ></div>
      <div
        :key="'b'+index"
        :id="'b'+f.id"
        v-show="f.type=='barcode'"
        :style="{
          zIndex:2,
          position:'absolute',
          top:f.fieldTop+'px',
          left:f.fieldLeft+'px'
        }"
      >
        <canvas :id="'barcode_'+order.afterCode+'_'+f.id" ></canvas>
      </div>
      <!-- <barcode
          class="bar-code"
          elementTag="img"
          v-if="f.fieldValue"
          :margin="0"
          :width="f.width"
          :height="f.height"
          :displayValue="false"
          :value="f.fieldValue"
      >Show this if the rendering fails.</barcode>-->
    </template>
  </div>
</template>
<script>
import JsBarcode from "jsbarcode";
import VueBarcode from "vue-barcode";
import DragItDude from "vue-drag-it-dude";
import toPx from "unit-to-px";

export default {
  components: {
    barcode: VueBarcode,
    DragItDude
  },
  props: {
    order: {
      type: Object,
      default() {
        return {};
      }
    },
    isDrag: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    let me = this;
    me.$watch(
      "order",
      newV => {
        me.$nextTick(() => {
          if (!newV) {
            return;
          }
          if (!me.isDrag) {
            if (
              me.order.afterCode &&
              me.order.printTempFields &&
              me.order.printTempFields.length > 0
            ) {
              me.order.printTempFields.forEach(field => {
                if (field.type == "barcode") {
                  JsBarcode(
                    "#barcode_" + me.order.afterCode + "_" + field.id,
                    me.order.afterCode,
                    {
                      format: "CODE128A",
                      width: field.width,
                      height: field.height,
                      displayValue: false,
                      margin: 0
                    }
                  );
                }
              });
            }
          } else {
            if (
              me.order.printTempFields &&
              me.order.printTempFields.length > 0
            ) {
              me.order.printTempFields.forEach(field => {
                if (field.type == "barcode") {
                  JsBarcode(
                    "#barcode_" + field.id,
                    field.fieldValue,
                    {
                      format: "CODE128A",
                      width: field.width,
                      height: field.height,
                      displayValue: false,
                      margin: 0
                    }
                  );
                }
              });
            }
          }
        });
      },
      {
        deep: true,
        immediate: true
      }
    );
  },
  data() {
    return {
      data: {}
    };
  },

  methods: {
    toPx(L) {
      return toPx(L + "cm");
    },
    handleDragging(f) {
      if (this.isDrag) {
        f.drag = true;
      }
    },
    handleDropped(f) {
      if (f.drag && this.isDrag) {
        let fieldEl = document.getElementById(f.id);
        f.fieldLeft = parseInt(fieldEl.style.left);
        f.fieldTop = parseInt(fieldEl.style.top);
        f.drag = false;
        this.$emit("dragstoped", f);
      }
    }
  }
};
</script>